<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .center {
            background: white;
            width: 100%;
            height: 100vh;
            border-radius: 12px;
            margin-top: 20px;
        }

        .centerTop {
            width: 98%;
            height: 50px;
            display: flex;
            margin-left: 10px;
            border-bottom: 1px #3636367c solid;
        }

        .createChapter {
            height: 40px;
            margin-left: 90%;
            margin-top: 20px;
        }

        .active {
            font-size: large;
            color: skyblue;
        }

        .default {
            font-size: large;
        }
    </style>

</head>
<body>
<div id="worktable">
    <div class="center">
        <div class="centerTop">
            <p :class="isInputActive ? 'active' : 'default'">章节管理</p>
            <p style="margin-left: 20px" :class="isInputActive ? 'default' : 'active'">草稿箱</p>
        </div>
        <div class="createChapter">
            <el-row>
                <el-button type="primary" round @click="addBookChapterHandle()">新建章节</el-button>
            </el-row>
        </div>
        <el-table
                :data="tableData"
                stripe
                class="tableBox"
        >
            <el-table-column
                    prop="chapterNumber"
                    label="章节"
            >
                <template slot-scope="scope">
                    <span>第{{ scope.row.index }}章</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="chapterTitle"
                    label="章节标题">
            </el-table-column>
            <el-table-column
                    prop="wordCount"
                    label="字数"
            ></el-table-column>
            <!--            <el-table-column-->
            <!--                    prop="wordCount"-->
            <!--                    label="审核状态"-->
            <!--            ></el-table-column>-->
            <el-table-column
                    prop="publishTime"
                    label="发布时间"
                    :formatter="dataFormat"
            ></el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    :formatter="statusFormatter"
            ></el-table-column>
            <el-table-column
                    label="操作"
                    width="160"
                    align="center"
            >
                <template slot-scope="scope">
                    <el-row>
                        <el-button type="primary" icon="el-icon-edit" circle
                                   @click="editChapter(scope.row.id)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle
                                   @click="deleteChapter((scope.row.id))"></el-button>
                    </el-row>
                </template>

            </el-table-column>
        </el-table>
    </div>


</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/chapter.js"></script>
<script src="../../js/index.js"></script>

<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="../../plugins/element-ui/index.css">
<script>
    new Vue({
        el: '#worktable',
        data() {
            return {
                input: '',
                id: '',
                status: '',
                index: 0,
                userInfo: {},
                chapter: {},
                tableData: [],
                isInputActive: true,
                bookId: '',
                page: 1,
                pageSize: 10,
                index: 0,
            }
        },
        computed: {},
        created() {
            this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
            this.bookId = requestUrlParam('bookId')

        },
        mounted() {
            this.init(this.bookId);
        },
        methods: {
            statusFormatter(row, column, value) {
                if (value === true) {
                    return '发布成功';
                } else if (value === false) {
                    return '待审核';
                }
            },
            //修改时间格式
            dataFormat: function (row) {
                //console.log(row);
                let data = row.publishTime
                // 创建一个 Date 对象
                const date = new Date(data);

                // 使用 Date 对象的方法获取年、月、日、小时、分钟、秒
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');
                const seconds = String(date.getSeconds()).padStart(2, '0');
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            },
            async init(bookId) {
                //获取作品信息
                queryChapterAll(bookId).then(res => {
                    if (String(res.code) === '200') {
                        console.log(res.data)
                        this.tableData = res.data
                        this.index = (this.page - 1) * this.pageSize;
                        // 遍历 tableData 数组，为每个对象设置 index 字段的值
                        this.tableData = res.data.map((item, index) => {
                            item.index = this.index + index + 1;
                            return item;
                        });
                    } else {
                        this.$message.error(res.msg || '系统错误')
                    }
                })
            },
            editChapter(chapterId) {
                editChapter(chapterId).then(res => {
                    if (res.code === 200)
                        this.chapter = res.data.data;
                    const chapterParam = encodeURIComponent(JSON.stringify(this.chapter));
                    window.parent.menuHandle({
                        id: '11',
                        url: `/author/page/bookManage/add.html?chapter=${chapterParam}`,
                        name: '章节管理'
                    }, true);
                })
            },
            deleteChapter(chapterId) {
                this.$confirm('确认删除该图书, 是否继续?', '确定删除', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                }).then(() => {
                    deleteChapter(chapterId).then(res => {
                        if (res.code === 200) {
                            this.$message.success("删除成功")
                            window.localStorage.setItem("totalCount", res.data.data.totalCount);
                            this.init(this.bookId);
                        }

                    })
                })
            },
            // 添加章节
            addBookChapterHandle() {
                const bookId = this.bookId;
                window.parent.menuHandle({
                    id: '9',
                    url: '/author/page/bookManage/add.html?bookId=' + bookId,
                    name: '创建章节'
                }, true)
            },

        }
    })
</script>
</body>
</html>